"use client";

import { useCallback, useState } from "react";
import dynamic from "next/dynamic";
import "react-quill/dist/quill.core.css";
import "react-quill/dist/quill.snow.css";
import "react-quill/dist/quill.bubble.css";
import { ProductProps } from "../product/[id]/page";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
const ProductForm = ({
  method,
  content,
}: {
  method: "post" | "put";
  content?: ProductProps;
}) => {
  const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 切换按钮
    ["blockquote", "code-block"],

    [{ header: 1 }, { header: 2 }], // 用户自定义按钮值
    [{ list: "ordered" }, { list: "bullet" }],
    [{ script: "sub" }, { script: "super" }], // 上标/下标
    [{ indent: "-1" }, { indent: "+1" }], // 减少缩进/缩进
    [{ direction: "rtl" }], // 文本下划线

    [{ size: ["small", false, "large", "huge"] }], // 用户自定义下拉
    [{ header: [1, 2, 3, 4, 5, 6, false] }],

    [{ color: [] }, { background: [] }], // 主题默认下拉，使用主题提供的值
    [{ font: [] }],
    [{ align: [] }],

    ["clean"], // 清除格式
  ];
  const [product, setProduct] = useState<any>(content ?? {});
  const handleClick = useCallback(() => {
    const decodedString = document.createElement("textarea");
    decodedString.innerHTML = product.description;
    var result = decodedString.value;
    product.description = result;
    fetch(`/api/product`, {
      method,
      body: JSON.stringify(product),
    });
  }, [product]);
  return (
    <div className=" flex  flex-col items-center ">
      <input
        type="text"
        placeholder="资源文件名"
        className="input input-bordered w-full max-w-xs block  mt-8"
        value={product.name}
        onChange={(e) => setProduct({ ...product, name: e.target.value })}
      />
      <input
        type="number"
        placeholder="价格"
        className="input input-bordered w-full max-w-xs block mt-8"
        value={product.price}
        onChange={(e) =>
          setProduct({ ...product, price: Number(e.target.value) })
        }
      />
      <input
        type="number"
        placeholder="下载数量"
        value={product.download}
        className="input input-bordered w-full max-w-xs block mt-8"
        onChange={(e) =>
          setProduct({ ...product, download: Number(e.target.value) })
        }
      />
      <ReactQuill
        className=" bg-white  rounded  input-bordered w-full max-w-xs block mt-8"
        modules={{ toolbar: toolbarOptions }}
        placeholder="描述"
        style={{ minHeight: 400 }}
        theme="snow"
        value={product.description}
        onChange={(v) => setProduct({ ...product, description: v })}
      />
      <input
        type="text"
        placeholder="背景图"
        className="input input-bordered w-full max-w-xs block mt-8"
        value={product.bgUrl}
        onChange={(e) => setProduct({ ...product, bgUrl: e.target.value })}
      />
      <input
        type="text"
        placeholder="资源地址"
        className="input input-bordered w-full max-w-xs block mt-8"
        value={product.url}
        onChange={(e) => setProduct({ ...product, url: e.target.value })}
      />
      <input
        type="text"
        placeholder="预览地址"
        className="input input-bordered w-full max-w-xs block mt-8"
        value={product.viewUrl}
        onChange={(e) => setProduct({ ...product, viewUrl: e.target.value })}
      />
      <input
        type="text"
        placeholder="提取码"
        className="input input-bordered w-full max-w-xs block mt-8"
        value={product.downloadCode}
        onChange={(e) =>
          setProduct({ ...product, downloadCode: e.target.value })
        }
      />
      <div className=" w-80">
        <button className=" btn btn-primary w-full mt-8" onClick={handleClick}>
          提交
        </button>
      </div>
    </div>
  );
};
export default ProductForm;
